import React, { useEffect, useRef } from "react";
import yayJpg from '../../../assets/yay.jpg';
import styles from './Index.less';
import { Avatar, Row, Col, Statistic, Tooltip } from 'antd';
import useHomeState from '../models/homeState';
import {useGlobalShare} from "../../../models/globalShare";

export default function HomePage() {

    const { themeColor,  currentUser, eventSource } = useGlobalShare();
    const {
        userCount, visitCount, currentWeather, snatch_current_weather, refresh_statistics, process_event_source,
        RAGChartRef, AgentChartRef, RAGNumberTimeChart, AgentNumberTimeChart
    } = useHomeState();

    useEffect(() => {
        console.log("========== HomePage useEffect ==========");
        refresh_statistics();

        snatch_current_weather();

        process_event_source(eventSource);
    }, [eventSource]);

    const onRefreshStatistics = () => {
        snatch_current_weather();
        refresh_statistics();
    }

    const contentHeight = window.innerHeight - 270;

    return (
        <div style={{ width: "100%", height: "100%", display: "flex", flexDirection: "column" }}>
            <Row style={{ flex: 1, display: "flex", padding: "15px 0px 0px 0px", marginBottom: 20, background: "#ffffff", height: contentHeight * 0.1 }}>
                <div style={{ flex: 1, textAlign: "center" }}>
                    <Avatar size={60} src={currentUser?.photo} icon={<i className={"ri-user-line"} />} />
                    <span style={{ padding: "0px 0px 0px 10px" }}>{currentUser?.user_name}</span>
                    <span style={{ padding: "0px 0px 0px 20px" }}>系统管理员</span>
                    <span style={{ padding: "0px 0px 0px 20px" }}>{currentUser?.phone_number}</span>
                    <span style={{ padding: "0px 0px 0px 20px" }}>{currentUser?.email}</span>
                </div>
                <div style={{ flex: 1, padding: "7px 0px 0px 0px", textAlign: "center" }}>
                    <div style={{ padding: "0px 0px 7px 0px" }}>
                        <span>{currentWeather?.cityInfo?.city}</span>
                        <span style={{ padding: "0px 10px 0px 10px" }}>{currentWeather?.data?.forecast[0].type}</span>
                        <span>{currentWeather?.data?.forecast[0].low}</span>
                        <span style={{ padding: "0px 10px 0px 10px" }}>{currentWeather?.data?.forecast[0].high}</span>
                        <span>{currentWeather?.data?.forecast[0].fx}</span>
                    </div>
                    <div>
                        <span>{currentWeather?.data?.forecast[0].notice}</span>
                    </div>
                </div>
                <div style={{ flex: 1, display: "flex", justifyContent: "center", padding: "5px 0px 0px 0px" }}>
                    <Statistic title="注册数"
                               value={userCount}
                               precision={0}
                               styles={{ margin: "0px 20px 0px 0px" }}
                               valueStyle={{ color: '#2bfa14', fontSize: "18px" }}
                               prefix={<i className="ri-account-circle-line" style={{ marginRight: "10px" }} />}
                               suffix="" />
                    <div style={{ padding: "0px 20px 0px 20px" }} />
                    <Statistic title="访问量"
                               value={visitCount}
                               precision={0}
                               valueStyle={{ color: '#faad14', fontSize: "18px" }}
                               prefix={<i className="ri-global-line" style={{ marginRight: "10px" }} />}
                               suffix="" />
                    <div className={styles.status_refresh_statistics}>
                        <Tooltip title="刷新数据">
                            <i className="ri-loop-right-line" style={{ fontSize: 24 }} onClick={() => onRefreshStatistics()} />
                        </Tooltip>
                    </div>
                </div>
            </Row>
            <Row style={{ flex: 4.5, height: contentHeight * 0.45, marginBottom: 20 }}>
                <Col span={8} style={{ background: "#ffffff" }}>
                    <div style={{ display: "flex", flexDirection: "column", flex: 1 }}>
                        <div style={{ textAlign: "left", height: 50, borderBottom: "1px solid #e8e8e8" }}>
                            <span style={{ margin: "15px 0px 0px 15px", position: "absolute" }}>
                                <i className="ri-news-line" style={{ padding: "0px 10px 0px 0px" }} />RAG检索
                            </span>
                        </div>
                        <div ref={RAGChartRef} style={{ height: contentHeight * 0.45 - 30 }} />
                    </div>
                </Col>
                <Col span={8} style={{ padding: "0px 20px 0px 20px" }}>
                    <div style={{ flex: 1, textAlign: "center", background: "#ffffff", height: contentHeight * 0.49, paddingTop: 5 }}>
                        <h2>Yay！Welcome to TaiXu！</h2>
                        <p>
                            <img src={yayJpg} height={ contentHeight * 0.45 - 40 } />
                        </p>
                    </div>
                </Col>
                <Col span={8} style={{ background: "#ffffff" }}>
                    <div style={{ display: "flex", flexDirection: "column", flex: 1 }}>
                        <div style={{ textAlign: "left", height: 50, borderBottom: "1px solid #e8e8e8" }}>
                            <span style={{ margin: "15px 0px 0px 15px", position: "absolute" }}>
                                <i className="ri-meta-line" style={{ padding: "0px 10px 0px 0px" }} />Agent智能
                            </span>
                        </div>
                        <div ref={AgentChartRef} style={{ height: contentHeight * 0.45 - 30 }} />
                    </div>
                </Col>
            </Row>
            <Row style={{ flex: 4.5, height: contentHeight * 0.45 }}>
                <Col span={12}>
                    <div style={{ display: "flex", height: 50, flexDirection: "row", borderBottom: "1px solid #e8e8e8", background: "#ffffff" }}>
                        <span style={{ margin: "15px 0px 0px 15px", position: "absolute" }}>
                            <i className="ri-rfid-line" style={{ padding: "0px 10px 0px 0px" }} />RAG检索
                        </span>
                    </div>
                    <div ref={RAGNumberTimeChart} style={{ height: contentHeight * 0.45 - 20, background: "#ffffff" }} />
                </Col>
                <Col span={12} style={{ padding: "0px 0px 0px 20px" }}>
                    <div style={{ display: "flex", height: 50, flexDirection: "row", borderBottom: "1px solid #e8e8e8", background: "#ffffff" }}>
                        <span style={{ margin: "15px 0px 0px 15px", position: "absolute" }}>
                            <i className="ri-rfid-line" style={{ padding: "0px 10px 0px 0px" }} />Agent智能
                        </span>
                    </div>
                    <div ref={AgentNumberTimeChart} style={{ height: contentHeight * 0.45 - 20, background: "#ffffff" }} />
                </Col>
            </Row>
        </div>
    );
}
